<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '个人资料',
  },
}
</route>
<template>
  <div class="user-info-page">
    <div class="list">
      <div class="item">
        <div class="title">头像</div>
        <div class="right" @click="chooseAvatar()">
          <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
          <div class="icon i-carbon-chevron-right"></div>
        </div>
      </div>
      <div class="item">
        <div class="title">昵称</div>
        <div class="right" @click="showMode()">
          <span class="nickname">{{ userInfo.nickname || '微信用户' }}</span>
          <div class="icon i-carbon-chevron-right"></div>
        </div>
      </div>
      <div class="item">
        <div class="title">关联手机</div>
        <div class="right" v-if="userInfo.phone">
          {{ desensitizePhone(userInfo.phone) }}
        </div>
      </div>
    </div>

    <div class="login-out active" @click="loginout()">退出登录</div>

    <wd-popup v-model="model.show" custom-style="background: transparent;">
      <div class="form-popup">
        <div class="form-title">修改昵称</div>
        <wd-form custom-class="custom-form" ref="form" :model="model">
          <wd-cell title="昵称">
            <wd-input
              prop="nickname"
              clearable
              v-model="model.nickname"
              placeholder="请输入昵称"
              :rules="[{ required: true, message: '请输入昵称' }]"
            />
          </wd-cell>
        </wd-form>

        <button class="submit active" @click="handleSubmit()">保存</button>
      </div>
    </wd-popup>
  </div>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { showModal, msgNone, msgSuccess, desensitizePhone } from '@/utils/index'
import { back } from '@/utils/page'
import { useUserStore } from '@/store/index'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

// 退出登录
function loginout() {
  showModal({
    title: '确认退出登录吗？',
  }).then(() => {
    userStore.clearUserInfo()
    msgNone('已退出登录')
    back()
  })
}

// 修改姓名相关
const model = reactive({
  show: false,
  nickname: '',
})
function showMode() {
  model.show = true
  model.nickname = userInfo.value.nickname
}
const form = ref()
function handleSubmit() {
  form.value.validate().then(({ valid }) => {
    if (valid) {
      updateUserInfo({
        nickName: model.nickname,
      })
    }
  })
}

// 修改头像
function chooseAvatar() {
  uni.chooseImage({
    count: 1, // 默认9
    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
    success(res) {
      if (res.errMsg === 'chooseImage:ok') {
        uni.showLoading()
        http
          .uploadFile(res.tempFilePaths[0])
          .then((r: any) => {
            updateUserInfo({
              avatar: r.data.url,
            })
          })
          .finally(() => {
            uni.hideLoading()
          })
      }
    },
  })
}

// 更新用户信息
function updateUserInfo(data) {
  uni.showLoading()
  http
    .post('/blade-auth/wx/modify', data)
    .then(() => {
      msgSuccess('保存成功')
      userStore.getUserInfo()
      model.show = false
    })
    .finally(() => {
      uni.hideLoading()
    })
}
</script>
<style lang="scss" scoped>
.user-info-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 28rpx 30rpx;
  padding-bottom: 132rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 132rpx) !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 132rpx) !important;
  background-color: var(--bgc4);

  .list {
    overflow: hidden;
    background-color: #fff;
    border-radius: 30rpx;
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 138rpx;
      padding: 0 24rpx;
      .title {
        font-size: 30rpx;
        color: var(--color1);
      }

      .right {
        display: flex;
        align-items: center;
        font-size: 27rpx;
        color: var(--color4);
        .avatar {
          width: 96rpx;
          height: 96rpx;
          background-color: var(--bgc1);
          border-radius: 48rpx;
        }
        .icon {
          margin-left: 16rpx;
          font-size: 30rpx;
          color: var(--color5);
        }
        .nickname {
          display: inline-block;
          min-width: 120rpx;
          text-align: right;
        }
      }
    }
  }

  .login-out {
    position: fixed;
    right: 30rpx;
    bottom: 20rpx;
    bottom: calc(constant(safe-area-inset-bottom) + 20rpx) !important;
    bottom: calc(env(safe-area-inset-bottom) + 20rpx) !important;
    left: 30rpx;
    box-sizing: border-box;
    height: 92rpx;
    font-size: 30rpx;
    font-weight: 600;
    line-height: 88rpx;
    text-align: center;
    background-color: var(--bgc4);
    border: 1px solid var(--color1);
    border-radius: 46rpx;
  }

  .form-popup {
    box-sizing: border-box;
    width: 654rpx;
    padding: 40rpx;
    background-color: #fff;
    border-radius: 30rpx;
    .form-title {
      margin-bottom: 40rpx;
      font-size: 30rpx;
      font-weight: 600;
      color: var(--color1);
      text-align: center;
    }
    .submit {
      box-sizing: border-box;
      width: 100%;
      height: 80rpx;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 80rpx;
      color: #fff;
      text-align: center;
      background-color: var(--color1);
      border-radius: 46rpx;
      box-shadow: 0px 17rpx 28rpx rgba(31, 32, 38, 0.3);
    }
  }
}
</style>
